{% extends 'base.html' %}
{% load static %}

{% block title %}重置密码邮件已发送 - 自动化测试平台{% endblock %}

{% block extra_css %}
<style>
    .info-container {
        max-width: 600px;
        margin: 0 auto;
        background: var(--card-bg);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        padding: 2.5rem;
        text-align: center;
    }
    
    .info-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        background-color: var(--info-light);
        color: var(--info);
        border-radius: 50%;
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }
    
    .info-title {
        font-size: 1.75rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 1rem;
    }
    
    .info-message {
        font-size: 1.125rem;
        color: var(--text-secondary);
        margin-bottom: 2rem;
        line-height: 1.6;
        text-align: left;
    }
    
    .info-message ol {
        padding-left: 1.5rem;
        margin: 1rem 0;
    }
    
    .info-message li {
        margin-bottom: 0.5rem;
    }
    
    .highlight {
        color: var(--primary);
        font-weight: 500;
    }
    
    .button-group {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .btn-primary {
        background-color: var(--primary);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 500;
        cursor: pointer;
        transition: background-color var(--transition-fast);
        text-decoration: none;
    }
    
    .btn-primary:hover {
        background-color: var(--primary-hover);
    }
</style>
{% endblock %}

{% block content %}
<div class="info-container">
    <div class="info-icon">
        <i class="fas fa-envelope"></i>
    </div>
    
    <h2 class="info-title">重置密码邮件已发送</h2>
    
    <p class="info-message">
        我们已向您提供的邮箱地址发送了重置密码的链接。请按照以下步骤操作：
    </p>
    
    <p class="info-message">
        <ol>
            <li>检查您的电子邮箱收件箱，查找来自我们系统的邮件</li>
            <li>点击邮件中的<strong>重置密码链接</strong></li>
            <li>在新页面中设置您的新密码</li>
            <li>使用新密码登录系统</li>
        </ol>
    </p>
    
    <p class="info-message">
        如果您在几分钟内没有收到邮件，请：<br>
        <span class="highlight">• 检查您的垃圾邮件文件夹</span><br>
        <span class="highlight">• 确认您输入的邮箱地址是否正确</span><br>
        <span class="highlight">• 如需进一步帮助，请联系系统管理员</span>
    </p>
    
    <div class="button-group">
        <a href="{% url 'portal:home' %}" class="btn-primary">返回首页</a>
    </div>
</div>
{% endblock %}